﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>应急预案系统</title>
    <script type="text/javascript" src="~/Assets/js/jquery.js"></script>
    <link rel="stylesheet" href="~/Assets/css/comon0.css">
    <link rel="stylesheet" href="~/Assets/css/style.css">
    <link rel="stylesheet" href="~/Assets/css/viewer.css">
    <link href="~/Assets/css/imageview.css" rel="stylesheet" />
    <link href="~/Assets/css/modal.css" rel="stylesheet" />
    <script src="~/Bussiness/js/base/angular.js"></script>
    <script src="~/Bussiness/js/base/jquery.cookie.js"></script>
    <script src="~/Bussiness/js/base/angular-cookie.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .w_box {
            width: 96%;
            max-width: 600px;
            margin: 0 auto;
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden
        }

        .disabled {
            cursor: not-allowed;
        }

        .img {
            position: relative;
        }

            .img em {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                -webkit-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
                cursor: pointer;
            }

        .sp_page2_area {
            padding: 100px 0;
        }

        .sp_page2 .time_point_list {
            position: relative;
            padding-top: 100px;
        }

            .sp_page2 .time_point_list.active {
                padding: 0;
            }

                .sp_page2 .time_point_list.active:before, .sp_page2 .time_point_list.active:after {
                    background-image: none;
                }

            .sp_page2 .time_point_list:last-child {
                padding-bottom: 100px;
            }

                .sp_page2 .time_point_list:last-child.active {
                    padding-bottom: 130px;
                }

            .sp_page2 .time_point_list em {
                display: inline-block;
                width: 35px;
                height: 35px;
                vertical-align: middle;
                background-size: contain;
            }

                .sp_page2 .time_point_list em.light, .sp_page2 .time_point_list.active em {
                    display: none;
                }

                    .sp_page2 .time_point_list.active em.light {
                        display: inline-block;
                    }

        .sp_page2 .txt_area {
            position: relative;
            display: inline-block;
            width: calc(100% - 150px);
            margin-left: 150px;
            font-size: 14px;
            color: #fff;
            line-height: 1.8;
            text-align: center;
        }

        .sp_page2 .tips_area {
            padding: 2px 5px;
            margin-bottom: 10px;
            border-radius: 4px;
            background: rgba(3, 63, 178, 0.5);
            border: 1px solid rgba(255,255,255,0.3);
        }

        .sp_page2 .txt_area:after {
            position: absolute;
            bottom: 27px;
            left: -78px;
            width: 20px;
            height: calc(100% - 54px);
            content: "";
            background: url(../../assets/images/sp_page2_solid3.png) no-repeat center top;
            background-size: contain;
        }

        .sp_page2 .desc_area {
            font-size: 15px;
            line-height: 1.8;
            width: 96%;
        }

        .sp_page2 .content_area {
            position: relative;
        }

            .sp_page2 .content_area .content {
                padding: 10px;
                margin-bottom: 15px;
                background: rgba(22, 48, 110, 0.4);
                border: 1px solid rgba(255,255,255,0.3);
            }

            .sp_page2 .content_area .time_point {
                position: absolute;
                left: -150px;
                bottom: -27px;
                line-height: 35px;
                z-index: 2;
                cursor: pointer;
            }

        .sp_page2 .time_point span {
            display: inline-block;
            width: 60px;
        }

        .sp_page2 .content_area h3 {
            font-size: 16px;
            color: #2ea9fc;
            margin-bottom: 10px;
        }

        .sp_page2 .version_area {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
        }

        .sp_page2 .rang_version {
            border-radius: 40px;
            padding: 5px;
            margin-bottom: 10px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.3);
        }

        .sp_page2 .rang_content {
            color: #e88700;
        }

            .sp_page2 .rang_content strong {
                font-size: 18px;
                color: #fff;
                font-weight: normal;
            }

        .sp_page2 .tips_area, .sp_page2 .content_area .content, .sp_page2 .rang_version, .sp_page2 .rang_content {
            display: none;
        }

        .sp_page2 .time_point_list.active .tips_area, .sp_page2 .time_point_list.active .content_area .content,
        .sp_page2 .time_point_list.active .rang_version, .sp_page2 .time_point_list.active .rang_content {
            display: block;
        }

        .sp_page2 .time_point_list.active .content_area:after {
            position: absolute;
            bottom: -13px;
            left: -55px;
            width: 55px;
            height: 13px;
            content: "";
            background: url(../../assets/images/sp_page2_solid1.png) no-repeat center top;
            background-size: contain;
        }

        .sp_page2 .time_point_list:before {
            position: absolute;
            top: 27px;
            left: 72px;
            width: 20px;
            height: 63px;
            content: "";
            background: url(../../assets/images/sp_page2_solid3.png) no-repeat center top;
            background-size: contain;
        }

        .sp_page2 .time_point_list:after {
            position: absolute;
            bottom: 0;
            left: 72px;
            width: 20px;
            height: 0;
            content: "";
        }

        .sp_page2 .time_point_list:first-child:before {
            background: url(../../Assets/images/sp_page2_solid2.png) top center;
        }

        .sp_page2 .time_point_list.active:first-child .txt_area:after {
            background-image: url(../../Assets/images/sp_page2_solid2.png);
        }

        .sp_page2 .time_point_list.active:first-child:before {
            background-image: none;
        }

        .sp_page2 .time_point_list:last-child:after {
            height: 115px;
            bottom: -46px;
            background: url(../../Assets/images/sp_page2_solid4.png) bottom center no-repeat;
        }

        .sp_page2 .time_point_list:last-child.active:after {
            bottom: 0;
        }

        .sp_page2 .time_point_list.active + .time_point_list:before {
            top: 13px;
            height: 78px;
        }

        .timePoint span {
            color: white;
        }

        .timePointAreaSp .content {
            color: white;
        }

        #pdfview-embed::-webkit-scrollbar {
            width: 10px;
            background-color: #f5f5f5;
        }

        #pdfview-embed::-webkit-scrollbar-thumb {
            background-color: #999;
            border-radius: 10px;
        }

            #pdfview-embed::-webkit-scrollbar-thumb:hover {
                background-color: #666;
            }

        .sycm_ul {
            width: 100%;
        }

            .sycm_ul li {
                text-decoration: none;
                list-style: none;
                float: left;
                color: white;
                font-weight: bold;
                font-size: 0.15rem;
                text-align: center;
                line-height: 0.8rem;
                width: 30%;
            }

            .sycm_ul b {
                font-size: 0.2rem;
                color: white;
            }

        .nav_list li {
            text-decoration: none;
            list-style: none;
            float: left;
            color: white;
            font-weight: bold;
            font-size: 0.15rem;
            text-align: center;
            line-height: 0.6rem;
            width: 30%;
        }

            .nav_list li a {
                color: white;
                cursor: pointer;
                display: block;
            }

                .nav_list li a:hover, a:focus {
                    text-decoration-line: underline;
                    text-decoration-color: blue;
                    text-decoration-style: solid;
                }

        .nav_content {
            width: 100%;
            height: 100%;
            display: none;
        }

            .nav_content img {
                max-width: 100%; /* 设置图片的最大宽度为父元素的宽度 */
                max-height: 100%; /* 设置图片的最大高度为父元素的高度 */
                display: block; /* 将图片设置为块级元素，以便应用 max-width 和 max-height 属性 */
            }

        .selected {
            border-bottom: 2px solid rgb(107,230,193);
        }

        .menu_body a {
            cursor: pointer;
        }

        .menu_list li {
            text-decoration: none;
            list-style: none;
            float: left;
            color: white;
            font-weight: bold;
            font-size: 0.2rem;
            text-align: center;
            line-height: 0.6rem;
            width: 8%;
        }

            .menu_list li a {
                color: white;
                cursor: pointer;
                display: block;
            }

        .div-relative {
            position: relative;
        }

        .detail_div {
            background-color: rgba(0,0,0,0.5);
            color: white;
            border-radius: 4px;
            z-index: 999;
            position: fixed;
            width: 300px;
        }

        .detail_text {
            display: none;
            font-size: 17px;
        }

        .div-a {
            position: absolute;
        }

        .factory-active {
            color: white;
            font-weight: bold;
        }

            .factory-active:hover {
                color: white;
                font-weight: bold;
            }
    </style>
</head>

<body ng-app="WebApp" ng-cloak ng-controller="MainController" ng-init="FactoryArea=1;">
    <div class="loading">
        <div class="loadbox"><img src="~/Assets/images/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
        <h1>应急预案系统</h1>
        <div class="weather"><img src="~/assets/images/weather.png"><span>多云</span><span id="today"></span></div>
    </div>
    <div class="mainbox" ng-controller="EmergencyController" ng-init="GetPlanListByType();GetCurrentEvent();GetTeamList();">
        <ul class="clearfix">
            <li style="width:20%;">
                <div class="boxall" style="height: 2.85rem;">
                    <div class="alltitle">应急预案</div>
                    <div class="sycm" style="overflow-y: scroll;height: 2.2rem;">
                        <div id="firstpane" class="menu_list">
                            <h3 ng-repeat-start="x in PlanList" ng-click="ShowPlanList(x.Id);" class="menu_head">{{x.TypeName}}</h3>
                            <div ng-repeat-end="x in PlanList" style="display:block" class="menu_body plan_{{x.Id}}" ng-repeat="y in x.PlanList">
                                <a ng-click="ShowPdf(y.FileList[0].FilePath,y.Title,y)">{{$index+1}}.{{y.Title}}</a>
                            </div>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 2.85rem">
                    <div class="alltitle">上报信息</div>

                    <div class="wrap">
                        <ul style="color: white;font-size: 15px;">
                            <li>
                                <p>地点：{{EventModel.LocationName}}</p>
                            </li>
                            <li>
                                <p>时间：{{EventModel.ReportTime|JSONDate:'yyyy-MM-dd HH:mm'}}</p>
                            </li>
                            <li>
                                <p>上报人：{{EventModel.ReportUser}}</p>
                            </li>
                            <li>
                                <p>上报问题：{{EventModel.Description}}</p>
                            </li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3rem">
                    <div class="alltitle">处置进度</div>
                    <div class="pbody" style="height: 2.4rem;overflow-y: scroll;">
                        <div class="w_box clearfix sp_page2_area">
                            <div class="sp_page2">
                                <ul class="timePointAreaSp">
                                    <li class="time_point_list active" ng-repeat="x in FlowList">
                                        <div class="txt_area">
                                            <div class="content_area">
                                                <div class="time_point timePoint">
                                                    <span>{{x.DealTime|JSONDate:'MM-dd HH:mm'}}</span>
                                                    <em style="background-image: url(../../Assets/images/sp_page2_point1.png);"></em>
                                                    <em class="light" style="background-image: url(../../Assets/images/sp_page2_point2.png);"></em>
                                                </div>
                                                <div class="content">
                                                    <h3>当前节点：{{x.NodeName}}</h3>
                                                    <p style="color:white;">处理人：{{x.DealUser}}</p>
                                                    <p style="color:white;">处理时间：{{x.DealTime|JSONDate:'HH:mm'}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li style="width:60%;">
                <div class="boxall" style="height: 9.3rem;">
                    <div class="alltitle">
                        <ul class="menu_list">
                            <li><a onclick="AllScreen();">预案</a></li>
                            <li><a ng-click="ShowFlowChart();" class="link">流程</a></li>
                            <li><a onclick="ShowMapView();" class="link">建筑</a></li>
                        </ul>
                        <div style="float:right;">
                            <a id="planname" style="cursor:pointer;"></a>&nbsp;&nbsp;
                        </div>
                    </div>
                    <div class="sycm" id="pdf-container">
                        <embed id="pdfview" src="../../File/Emergency/PlanForm/sfaqzh001.pdf" type="application/pdf" width="100%" style="height:8.5rem;" />
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li style="width:20%;">
                <div class="boxall" style="height: 9.3rem;background-color:rgb(4,56,130,0.5) ;">
                    <div class="alltitle">现场播报</div>
                    @*<div class="" style="height:0.4rem;background-color: rgb(3,17,90,0.5); margin: 10px;">
                            <p id='timer' style="color:white;font-size:0.18rem;line-height:0.4rem;text-align: center;font-weight: bold;"></p>
                        </div>*@
                    <div class="sycm" id="siteinfo" style="height: 2.2rem;">

                    </div>
                    <div class="" style="height:0.8rem;background-color: rgb(3,17,90,0.5); margin: 10px;">
                        <ul class="sycm_ul">
                            <li>消防队伍&nbsp;&nbsp;<b>{{PersonModel.FirefightersTeamCount}}</b></li>
                            <li>转移员工&nbsp;&nbsp;<b>{{PersonModel.TransfersCount}}</b></li>
                            <li>伤亡人数&nbsp;&nbsp;<b>{{PersonModel.CasualtiesCount}}</b></li>
                        </ul>
                    </div>

                    <div class="" style="height:0.6rem; margin: 10px;">
                        <ul class="nav_list">
                            <li><a class="link" data-tab="nav_1" href="#nav_1">建筑</a></li>
                            <li><a class="link" data-tab="nav_2" href="#nav_2">队伍</a></li>
                            <li><a class="link" data-tab="nav_3" href="#nav_3">物资</a></li>
                        </ul>
                    </div>
                    <div class="nav_body" style="height:2rem;background-color: rgb(3,17,90,0.5); margin: 10px;overflow-y:scroll;">
                        <div id="nav_1" class="nav_content">
                            <img src="../../Assets/images/struct.png" ng-show="CurrentBuilding==null||CurrentBuilding.MapFilePath==null||CurrentBuilding.MapFilePath==''" />
                            <img ng-src="{{CurrentBuilding.MapFilePath}}" ng-show="CurrentBuilding!=null&&CurrentBuilding.MapFilePath!=null && CurrentBuilding.MapFilePath!=''" />

                        </div>
                        <div id="nav_2" style="display: none;" class="nav_content">
                            <div class="addnew" style="overflow-y: scroll;">
                                <div class="adduser" style="height:100%;">
                                    <ul class="clearfix">
                                        <li class="clearfix" ng-repeat="x in TeamList"> <span class="pulll_left">&nbsp;&nbsp;{{x.Name}} </span>&nbsp;&nbsp;<span>{{x.Phone}}</span> <span class="pulll_right">{{x.Title}}</span> </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="nav_3" class="nav_content">
                            <div class="addnew" style="overflow-y: scroll;">
                                <div class="adduser" style="height:100%;">
                                    <ul class="clearfix">
                                        <li class="clearfix" ng-repeat="x in SuppliesList"> <span class="pulll_left">&nbsp;&nbsp;{{x.SupplyName}} {{x.Quantity}} {{x.Unit}}</span> <span class="pulll_right">{{x.Responsible}}</span> </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="height:2rem;background-color: rgb(3,17,90,0.5); margin: 10px;">
                        <div class="wrap">
                            <ul style="color: white;font-size: 15px;" ng-show="CurrentBuilding!=null">
                                <li>
                                    <p style="width: 100%;">厂区：<b style="text-align: right;color:#fff;float: right;margin-right: 20px;font-size:15px;">{{CurrentBuilding.FactoryAreaId|GetFactoryAreaName}}</b></p>
                                </li>
                                <li>
                                    <p style="width: 100%;">建筑物：<b style="text-align: right;color:#fff;float: right;margin-right: 20px;font-size:15px;">{{CurrentBuilding.LocationName}}</b></p>
                                </li>
                                <li>
                                    <p style="width: 100%;">结构类型：<b style="text-align: right; color: #fff; float: right; margin-right: 20px; font-size: 15px;">{{CurrentBuilding.Struct}}</b></p>
                                </li>
                                <li>
                                    <p style="width: 100%;">建筑面积：<b style="text-align: right; color: #fff; float: right; margin-right: 20px; font-size: 15px;">{{CurrentBuilding.Square}}m²</b></p>
                                </li>
                            </ul>
                            <ul style="color: white;font-size: 15px;" ng-show="CurrentBuilding==null">
                                <li>
                                    <p style="width: 100%;">厂区：<b style="text-align: right;color:#fff;float: right;margin-right: 20px;font-size:15px;">浦东</b></p>
                                </li>
                                <li>
                                    <p style="width: 100%;">建筑物：<b style="text-align: right;color:#fff;float: right;margin-right: 20px;font-size:15px;">ARJ21部装厂房</b></p>
                                </li>
                                <li>
                                    <p style="width: 100%;">结构类型：<b style="text-align: right; color: #fff; float: right; margin-right: 20px; font-size: 15px;">钢结构</b></p>
                                </li>
                                <li>
                                    <p style="width: 100%;">建筑面积：<b style="text-align: right; color: #fff; float: right; margin-right: 20px; font-size: 15px;">41984m²</b></p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
        <div class="pop-up" id="mapview" ng-init="GetMapLocation();">
            <span class="close" style="font-size:25px;color:white;float:right;cursor:pointer;">×</span>
            <div class="div-relative" style="width:100%;  margin:0px auto;overflow:hidden;">

                <img src="../../Assets/images/pvg.png" ng-show="FactoryArea==1" />
                <img src="../../Assets/images/dcArea.jpg" ng-show="FactoryArea==2" />
                <div class="zhuashou" style="position:absolute;top:755px;left:140px; color:white;font-weight:bold;font-size:20px;z-index:99;">
                    <a ng-class="{'factory-active' :FactoryArea==1}" style="cursor:pointer;" ng-click="ChangeFactoryByArea(1);">浦东</a>&nbsp;&nbsp;
                    <a ng-class="{'factory-active' :FactoryArea==2}" style="cursor:pointer;" ng-click="ChangeFactoryByArea(2);">大场</a>
                </div>
                <div>
                    <div ng-show="FactoryArea==1" class="div-a" style="left:23px;">

                    </div>
                    <div ng-show="x.FactoryAreaId==FactoryArea" ng-repeat="x in MapLocationList" class="div-a" ng-style="{'left':x.X+'%','top':x.Y+'%'}">
                        <div ng-click="ShowBuildingStruct(x.MapFilePath,x);" ng-mouseover="doMapMouse('struct',x.Id)" ng-mouseleave="MouseLeave('struct',x.Id)" style="font-size:12px; border-radius:4px;cursor:pointer;">
                            <a class="titlediv ng-binding" style="color:gainsboro;" title="">{{x.Simple}}</a>
                        </div>
                        <div class="detail_div">
                            <div id="struct{{x.Id}}" class="detail_text">
                                <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{x.LocationName}}</span></span><br />
                                <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>结构：</b><span>{{x.Struct}}</span></span><br />
                                <span style="top: -2px; position: relative; padding: 5px;"><span class="glyphicon glyphicon-play"> </span><b>面积：</b><span>{{x.Square}}m²</span></span><br />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="back"></div>

    <div class="pop-up" id="structview">
        <span onclick="closestruct();" style="font-size:25px;color:white;float:right;cursor:pointer;">×</span>
        <div style="width:100%; margin:0px auto;">
            <img id="location_map" />
        </div>
    </div>
    <div class="pop-up" id="pdfreader">
        <span class="close" style="font-size:25px;color:white;float:right;cursor:pointer;">×</span>
        <div style="width:80%; margin:20px auto;">
            <embed id="pdfviewscreen" src="" type="application/pdf" width="100%" style="height:10.5rem;" />
        </div>
    </div>
    <div class="pop-up" id="flowchart">
        <imgview>
            <span class="close" style="font-size: 25px; color: rgb(10,28,99); right:20px; cursor: pointer; z-index: 101; position: absolute;">×</span>
            <nav id="nav">
                <button id="prev" class="nav-item" data-increment="-1">
                    <img src="../../assets/images/icon-prev.png" alt="prev" />
                </button>
                <button id="next" class="nav-item" data-increment="1">
                    <img src="../../assets/images/icon-next.png" alt="next" />
                </button>
            </nav>
            <!-- coidea:slideshow:navigation END -->
            <!-- coidea:slideshow START -->
            <section class="coidea-3d-carousel">
                <div class="stage" id="imagelist">
                    <div class="item">
                        <div class="bcg" style="background-image: url(../../assets/images/img-1.png);"></div>
                    </div>
                    <div class="item">
                        <div class="bcg" style="background-image: url(../../assets/images/img-2.png);"></div>
                    </div>
                    <div class="item">
                        <div class="bcg" style="background-image: url(../../assets/images/img-1.png);"></div>
                    </div>
                </div>
            </section>
            <!-- coidea:slideshow END -->

            <script src="~/Assets/js/TweenMax.min.js"></script>
            <script src="~/Assets/js/imagesloaded.pkgd.min.js"></script>
            <script src="~/Assets/js/imageviewinit.js"></script>
        </imgview>
    </div>
    <script language="JavaScript" src="~/Assets/js/js.js"></script>
    <script type="text/javascript" src="~/Assets/js/echarts.min.js"></script>
    <script type="text/javascript" src="~/Assets/js/style.js"></script>
    <script src="~/Bussiness/js/libs/ng-file-upload-shim.min.js"></script>
    <script src="~/Bussiness/js/libs/ng-file-upload.min.js"></script>
    <script src="~/Bussiness/js/pg/app.js?v=@DateTime.Now.ToString("yyMMddHH")"></script>
    <script src="~/Bussiness/js/pg/EmergencyPlan.js?v=@DateTime.Now.ToString("yyMMddHH")"></script>

    <script>

        function ShowPdf(url, name) {
            document.getElementById('pdfview').src = url;
            $("#planname").html(name);
        }

        $('.pop-up .close').click(function () {
            $('.pop-up').removeClass('open');

        });

        function closestruct() {
            $('#structview').removeClass('open');
            ShowMapView();
        }

        $(document).ready(function () {
            // 当点击标签链接时
            $(".nav_list .link").click(function (e) {
                e.preventDefault(); // 防止链接的默认行为
                $(".nav_list .link").removeClass("selected");
                var tabId = $(this).data("tab"); // 获取当前链接的 data-tab 属性值
                $(".nav_content").hide(); // 隐藏所有 tab 内容
                $("#" + tabId).show(); // 显示当前 tab 内容
                $(this).addClass("selected");
            });

            // 默认显示第一个 tab
            $("#nav_1").show();
            $(".link[data-tab='nav_1']").addClass("selected");
        });

        function doMapMouse(type, index) {
            var id = type + index;
            var detail = document.getElementById(id);
            detail.style = "display:inline";
        }

        function MouseLeave(type, index) {
            var id = type + index;
            var detail = document.getElementById(id);
            if (detail != null) {
                detail.style = "display:none";
            }
        }
    </script>

    <script>
        // 创建一个 Date() 对象
        var today = new Date();

        // 获取年、月、日
        var year = today.getFullYear();
        var month = today.getMonth() + 1; // 月份从 0 开始计数，所以要加 1
        var date = today.getDate();

        // 格式化日期字符串，如：2023年4月19日
        var formattedDate = year + "年" + month + "月" + date + "日";

        // 将日期显示在页面上
        document.getElementById("today").innerHTML = formattedDate;
    </script>
    <script type="text/javascript">

        function AllScreen() {
            $('#pdfreader').addClass('open');
            var src = document.getElementById('pdfview').src;
            document.getElementById('pdfviewscreen').src = src;
        }
        function ShowMapView() {
            $('#mapview').addClass('open');
        }
        function ShowBuildingStruct() {
            $('#structview').addClass('open');
        }
        $(document).ready(function () {
            $("#firstpane .menu_body:eq(0)").show();
            $("#firstpane h3.menu_head").click(function () {
                $(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
                $(this).siblings().removeClass("current");

            });

            $(function () {
                $('.timePointAreaSp .timePoint').click(function () {
                    $(this).parents('.time_point_list').addClass('active').siblings().removeClass('active');
                })
            })
            $("#secondpane .menu_body:eq(0)").show();
            $("#secondpane h3.menu_head").mouseover(function () {
                $(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
                $(this).siblings().removeClass("current");
            });
        })


        const pastTime = new Date('2023-04-18T00:00:00Z').getTime();
        setInterval(() => {
            const now = new Date().getTime();
            const elapsed = now - pastTime;
            const seconds = Math.floor(elapsed / 1000);
            const minutes = Math.floor(seconds / 60);
            const hours = Math.floor(minutes / 60);
            const days = Math.floor(hours / 24);
            const timeString = `${hours % 24}小时 ${minutes % 60}分钟 ${seconds % 60}秒`;
            //document.getElementById('timer').textContent = `持续时间：${timeString}`;
        }, 1000);

    </script>

    <script>

        setTimeout(() => {
            //ShowSiteInfo();
        }, 2000);
        function ShowSiteInfo() {

            var mychart = echarts.init(document.getElementById('siteinfo'));

            var option = {
                color: [
                    "#3fb1e3",
                    "#6be6c1",
                    "#626c91",
                    "#a0a7e6",
                    "#c4ebad",
                    "#96dee8"
                ],

                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    bottom: 5,
                    textStyle: {
                        color: 'white'
                    }
                },

                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        labelLine: {
                            normal: {
                                length: 3
                            }
                        },
                        avoidLabelOverlap: false,
                        label: {
                            formatter: '{b}{c}人',
                            align: 'center',
                            show: true,
                            textStyle: {
                                ellipsis: true, // 或者设置为 'truncate'
                            },
                            position: 'outside'
                        },
                        center: ['50%', '40%'],
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: [
                            { value: 8, name: '应急人员' },
                            { value: 6, name: '消防人员' },
                            { value: 4, name: '厂区员工' }
                        ]
                    }
                ]
            };
            mychart.setOption(option);
            mychart.resize();


        }
    </script>


    <script type="text/javascript">

        function initteam() {

            var html2 = $("#nav_2 .adduser ul").html()
            $("#nav_2 .adduser ul").append(html2)
            var ls2 = $("#nav_2 .adduser li").length / 2 + 1
            a = 0
            ref = setInterval(function () {
                a++
                if (a == ls2) {
                    a = 1
                    $("#nav_2 .adduser ul").css({ marginTop: 0 })
                    $("#nav_2 .adduser ul").animate({ marginTop: -'.5' * a + 'rem' }, 800)
                }
                $("#nav_2 .adduser ul").animate({ marginTop: -'.5' * a + 'rem' }, 800)


            }, 4300);

        }

        function initassets() {
            var html2 = $("#nav_3 .adduser ul").html()
            $("#nav_3 .adduser ul").append(html2)
            var ls2 = $("#nav_3 .adduser li").length / 2 + 1
            a = 0
            ref = setInterval(function () {
                a++
                if (a == ls2) {
                    a = 1
                    $("#nav_3 .adduser ul").css({ marginTop: 0 })
                    $("#nav_3 .adduser ul").animate({ marginTop: -'.5' * a + 'rem' }, 800)
                }
                $("#nav_3 .adduser ul").animate({ marginTop: -'.5' * a + 'rem' }, 800)


            }, 4300);

        }

    </script>

</body>
</html>
